<template>
	<view class="content">
		<view class="header">
			<!-- 搜索 -->
			<view class="search">
				<input class="uni-input" focus placeholder="搜索" @input='searchValue' />
				<view class="screen">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/finance/screen.png" mode="heightFix"></image>
					</view>
					<view class="font24" @click="getData()">
						筛选
					</view>
				</view>
			</view>
			<!-- 切换标签 -->
			<view class="tabs">
				<uv-tabs :list="tabsList" :current="current" lineColor="#1DB481" :inactiveStyle="{color:'#333333'}"
					:activeStyle="{color:'#333333'}" @click="tabsClick" :scrollable="false"></uv-tabs>
			</view>
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="whole data" v-if="dataList.length > 0">
					<view class="item" v-for="(item,index) in dataList" :key="index">
						<view class="profit">
							<view class="left">
								<view class="image">
									<image :src="item.business_license" mode="aspectFit"></image>
								</view>
								<view class="info">
									<view class="shopName font28 fontw">
										{{item.title}}
									</view>
									<view class="y-profit font28">
										昨日利润新增￥{{item.yl_money}}
									</view>
								</view>
							</view>
							<view class="z-profit font28 fontw">
								+{{item.sum_total_money}}
							</view>
						</view>
						<view class="operations">
							<view class="o-item">
								<view class="image">
									<image src="https://wx.caobenjiankang.com/image/finance/operating.png" mode="aspectFit"></image>
								</view>
								<view class="o-name font28">
									总营业额
								</view>
								<view class="o-data font28 fontw">
									{{item.sum_total_money}}
								</view>
							</view>
							<view class="o-item">
								<view class="image">
									<image src="https://wx.caobenjiankang.com/image/finance/activate.png" mode="aspectFit"></image>
								</view>
								<view class="o-name font28">
									开卡充值
								</view>
								<view class="o-data font28 fontw">
									{{item.kk_sum}}
								</view>
							</view>
							<view class="o-item">
								<view class="image">
									<image src="https://wx.caobenjiankang.com/image/finance/vip.png" mode="aspectFit"></image>
								</view>
								<view class="o-name font28">
									新增会员
								</view>
								<view class="o-data font28 fontw">
									{{item.new_user_count}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="font32 fontw" style="color:#969696;text-align: center;" v-else>
					暂无数据
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [{
					name: '全部'
				}, {
					name: '利润最高'
				}], //切换标签
				current: 0, //标签索引
				dataList: [], //数据
				scrollTop: 0, //初始化滚动高度
				keyword: ''
			}
		},
		components: {

		},
		onLoad() {
			this.getData()
		},
		methods: {
			async getData() {
				const data = await this.$api.finance.StoreLst({
					keyword: this.keyword,
					desc: this.current
				})
				this.dataList = data
			},
			searchValue(e) {
				this.keyword = e.detail.value
			},
			tabsClick(e) {
				this.current = e.index
			},
			scrolltolower() {
				if (this.current == 0) {
					this.getData()
				}
				if (this.current == 1) {
					this.getData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header {
			background-color: #fff;
			width: 100%;

			.search {
				padding: 16rpx 43rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					flex: 1;
					height: 66rpx;
					padding-left: 36rpx;

					/deep/.input-placeholder {
						font-size: 24rpx
					}
				}

				.screen {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 8rpx;

						image {
							height: 21rpx;
						}
					}
				}
			}

			.tabs {

				// /deep/.uv-sticky {
				// 	// width: 50%;

				// 	.uv-tabs__wrapper__nav__item {
				// 		width: 200rpx;
				// 	}

				// 	.uv-tabs__wrapper__nav {
				// 		// justify-content: space-between;
				// 	}
				// }
			}
		}

		.box {
			padding: 16rpx 29rpx;

			.scroll-Y {
				height: calc(100vh - 202rpx - var(--status-bar-height));

				.data {
					.item {
						background-color: #fff;
						border-radius: 16rpx;
						margin-bottom: 16rpx;
						padding: 17rpx 44rpx 29rpx 43rpx;

						.profit {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.left {
								.image {
									width: 122rpx;
									height: 122rpx;
									border-radius: 24rpx;
									overflow: hidden;

									image {
										width: 122rpx;
										height: 122rpx;
									}
								}

								.info {
									margin-left: 18rpx;

									.shopName {
										margin-bottom: 14rpx;
									}

									.y-profit {
										color: #666666;
									}
								}
							}

							.z-profit {
								color: #FF4A00;
							}
						}

						.operations {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 32rpx;
							margin-top: 52rpx;

							.o-item {
								.image {
									width: 38rpx;
									height: 39rpx;
									overflow: hidden;
									margin-bottom: 39rpx;

									image {
										width: 38rpx;
										height: 39rpx;
									}
								}

								.o-name {
									margin-bottom: 24rpx;
								}

								.o-data {
									color: #1DB582;
								}
							}
						}
					}
				}
			}
		}
	}
</style>